<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ziti1{
				font-family: "times new roman","微软雅黑","宋体"  ;
				font-size: 30px;
			}
			
			ul {
				height: 800px;
				background:url(img/lyf14.jpg);
				border: 2px solid gray;
				margin-top: 50px;
				list-style: none;
				text-align: center;
			}
			
			ul li {
				width: 200px;
				height: 200px;
				display: inline-block;
				text-align: center;
				margin-top: 150px;
				transition: transform 2s;
			
				position: relative;
			}
			
			ul li img {
				width: 200px;
				height: 240px;
				border: 5px solid white;
			
			}
			
			ul li:nth-child(1) {
				transform: rotate(30deg);
			}
			
			ul li:nth-child(2) {
				transform: rotate(-40deg);
			}
			
			ul li:nth-child(3) {
				transform: rotate(10deg);
			}
			
			ul li:nth-child(4) {
				transform: rotate(45deg);
			}
			ul li:nth-child(5) {
				transform: rotate(30deg);
			}
			ul li:nth-child(6) {
				transform: rotate(-40deg);
			}
			
			ul li:hover {
				transform: rotate(0deg) scale(1.5);
				z-index: 999;
				/* 需要设置定位流 */
			}
			div{
				font-size: 18px;
				text-align: center;
				font-weight: 700;
			}
		</style>
	</head>
	<body bgcolor="#F0FFFF">
		<p class="ziti1">李易峰的峰狂演唱会:</p>
		<div>
			<p>李易峰的演唱会</p>
			<p>“峰狂2015”Fan’s Meeting演唱会</p>
			<p>共三场</p>
			<p> 2015-01-31    北京    国家体育馆</p>
			<p> 2015-02-28    上海    上海大舞台</p>
			<p> 2015-05-03    成都    成都体育中心</p>
		</div>
		<ul>
			<li><img src="img/ych1.jpg" alt=""></li>
			<li><img src="img/ych2.jpg" alt=""></li>
			<li><img src="img/ych3.jpg" alt=""></li>
			<li><img src="img/ych5.jpg" alt=""></li>
			<li><img src="img/ych6.jpg" alt=""></li>
			<li><img src="img/ych7.jpg" alt=""></li>
		</ul>
		
		
	</body>
</html>
